<template>
    <!-- use the modal component, pass in the prop -->
    <modal v-if="stateManager.SeeDialogVisible"
           @cancel="closeDialog"
           @ok="saveModel"
           :modal-title="modalTitle"
           model-size="normal">
        <!--
          you can use custom content here to overwrite
          default content
        -->
        <vue-form>
            <div class="row">
                <div class="col-xs-12">
                    <vue-form-item label="回复内容" :error-message="errors.first('reply')">
                        <textarea class="form-control" v-model="reply"
                                    v-validate="'required'"
                                    label="回复内容"
                                    el-name="reply">

                        </textarea>

                    </vue-form-item>
                </div>
            </div>
        </vue-form>
    </modal>


</template>

<script>
    export default {
        props: {
            stateManager: {
                type: Object
            }
        },
        data: function () {
            return {
                message_id:0,
                reply:''
            };
        },
        methods: {
            closeDialog: function () {
                this.stateManager.SeeModelId = 0;
                this.stateManager.SeeDialogVisible = false;
            },
            saveModel: function () {
//                ladda.start();
                let self = this;
                self.validate(function () {
                    axios.post('api/WeChat/messageReply',{message_id:self.message_id,reply:self.reply}).then(function (response) {
                        console.log(response);
                        self.closeDialog();
                        self.stateManager.refreshList = true;
                        toastr.success(response.data.message);
                    }).catch(function (error) {
                        console.log(error);
                        self.stateManager.refreshList = true;
                        toastr.error(error.message);
                    });
                    self.reply='';
                });
            },

            validate: function (successCallback, failedCallback) {
                this.$validator.validateAll().then(() => {
                    // eslint-disable-next-line
                    console.log('验证通过');
                    typeof successCallback === 'function' && successCallback();
                }).catch(() => {
                    // eslint-disable-next-line
                    console.log('验证未通过');
                    typeof failedCallback === 'function' && failedCallback();
                });

            }


        },
        computed: {
            modalTitle: function () {
                return '回复消息';
            }
        },
        watch: {
            'stateManager.SeeModelId': function (newValue) {
                this.message_id=newValue;
                console.log(newValue);
            }
        }
    }
</script>